<script lang="ts" setup>
	import { ref, watch } from "vue";
	import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
	import { getGoodsList } from "@/apis/goods/index";
	const keyword = ref("");
	// const baseURL = "http://192.168.0.162:3333";
	const baseURL = "https://www.yunyoutongxin.com";

	const list = ref<any>([
		{ name: "全部", opt: "" },
		{ name: "移动", opt: 1 },
		{ name: "联通", opt: 2 },
		{ name: "电信", opt: 3 },
		{ name: "广电", opt: 4 },
	]);
	//运营商
	const opt = ref("");
	const changeOpt = (item : any) => {
		console.log(item);
		opt.value = item.opt;
	};

	const orderList = ref<any>([]);
	// 定义当前页
	let page = 1;
	// 定义当前页容量
	const size = 10;
	// 定义商品总条数
	const counts = ref(0);

	const loadData = async () => {
		// 测试套餐接口
		setTimeout(() => {
			getGoodsListEffect('');
		}, 100);
	};
	loadData();
	const getGoodsListEffect = async (cb : any) => {

		await getGoodsList({
			page,
			size,
			operator: opt.value,
			keyword: keyword.value,
		}).then((res : any) => {
			console.log(res);
			if (res.data.code == 200) {
				orderList.value.push(...res.data.data.list);
				counts.value = res.data.data.total;
			}
		});
		cb && cb()
	};
	// 上拉触底的事件
	onReachBottom(() => {
		if (page * size >= counts.value) return uni.showToast({ title: '数据加载完毕' })
		page++;
		getGoodsListEffect('')
	})


	// 下拉刷新的事件
	onPullDownRefresh(() => {
		page = 1
		orderList.value = []
		counts.value = 0
		keyword.value = ''
		getGoodsListEffect(() => uni.stopPullDownRefresh())
	})


	//搜索框搜索
	const searchByKey = (val : any) => {
		console.log(val)
		keyword.value = val
		orderList.value = [];
		page = 1;
		getGoodsListEffect('');
	}

	//监听tabs切换
	watch([() => opt.value], (newValue) => {
		orderList.value = [];
		page = 1;
		getGoodsListEffect('');
	});
	const goCreat = (item : any) => {
		console.log(item, 230933)
		uni.navigateTo({
			url: `/pages/orderCreate/index?pid=${item.id}&&spid=${item.package_super}&&tid=${item.type}`,
		});
	}
</script>
<template>

	<view class="search-box">
		<uv-search @search='searchByKey' placeholder="请输入套餐名关键字" v-model="keyword" :showAction="false"></uv-search>
	</view>
	<view class="tabs">
		<uv-line></uv-line>
		<uv-tabs :list="list" @click="changeOpt" :customStyle="{width:'100%'}" :itemStyle="{
        width: '20%',
        background: '#fff',
        boxSizing: 'border-box',
        padding: '20rpx',
      }"></uv-tabs>
	</view>
	<template v-if="orderList.length">
		<view class="goodItem" v-for="item in orderList" :key="item.id" @click="goCreat(item)">
			<view class="title esp">{{ item.name }}</view>
			<uv-line></uv-line>
			<view class="container">
				<view class="img">
					<uv-image :src="`${baseURL}/image/${item.img}`" width="240rpx" height="240rpx"></uv-image>
				</view>
				<view class="text">
					<view class="mb">商品ID: {{ item.id }}</view>
					<view class="btn mb">
						<uv-button type="error" size="small" text="主推"></uv-button>
						<uv-button type="primary" size="small" text="上架中"></uv-button>
					</view>
					<view class="mb">
						运营商:
						<span v-if="item.operator == 1">移动</span>
						<span v-if="item.operator == 2">联通</span>
						<span v-if="item.operator == 3">电信</span>
						<span v-if="item.operator == 4">广电</span>
					</view>
				</view>
			</view>

		</view>
	</template>
	<view style="padding: 60rpx; text-align: center" v-else>
		<uv-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
	</view>

	<Footer :tabbar="1"></Footer>
</template>
<style lang="scss" scoped>
	.search-box {
		position: relative;
		z-index: 0;
		background-color: #fff;
		padding: 20rpx;
	}

	.goodItem {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 10rpx;

		.title {
			padding-bottom: 20rpx;
		}

		.container {
			padding: 30rpx 0;
			display: flex;
			flex: 1;

			.text {
				padding-left: 20rpx;
			}
		}

		:deep(.uv-button-wrapper) {
			display: inline-block;
			margin-right: 10rpx;
		}

		.share-link {
			padding: 20rpx 0;

			.grid-text {
				color: #3369ff;
			}

			:deep(.uv-grid-item) {
				padding: 20prx;
			}
		}
	}

	.mb {
		margin-bottom: 30rpx;
	}

	.poxPost {
		position: fixed;
		top: 100rpx;
	}

	:deep(.uv-button--small) {
		min-width: 100rpx !important;
		height: 50rpx !important;
		padding: 0rpx 14rpx !important;
		font-size: 24rpx !important;
	}

	:deep(.uv-tabs__wrapper__nav) {
		width: 100%;
	}
</style>